<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="box" ref="box" @mouseenter="handleBoxMouseEnter()" @mouseleave="handleBoxMouseLeave()"
            @mousemove="handleBoxMouseMove($event)">
            <div class="mask" ref="mask"></div>
        </div>
        <div class="big" ref="big"></div>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    new Vue({
        el: "#app",
        data() {
            return {

            }
        },
        methods: {
            handleBoxMouseEnter() {
                this.mask().style.display = 'block'
                this.big().style.display = 'block'
            },
            handleBoxMouseLeave() {
                this.mask().style.display = 'none'
                this.big().style.display = 'none'
            },
            handleBoxMouseMove(e) {
                let mask = this.mask(),
                    box = this.box(),
                    big = this.big()

                let x = e.pageX - box.offsetLeft,
                    y = e.pageY - box.offsetTop;

                let maskX = x - mask.offsetWidth / 2,
                    maskY = y - mask.offsetHeight / 2

                // 范围限制
                maskX = maskX < 0 ? 0 : maskX;
                maskY = maskY < 0 ? 0 : maskY;

                let maskMaxX = box.offsetWidth - mask.offsetWidth,
                    maskMaxY = box.offsetHeight - mask.offsetHeight

                maskX = maskX > maskMaxX ? maskMaxX : maskX
                maskY = maskY > maskMaxY ? maskMaxY : maskY

                mask.style.left = maskX + 'px'
                mask.style.top = maskY + 'px'

                let bigX = -(maskX * 2) + 'px',
                    bigY = -(maskY * 2) + 'px'

                big.style.backgroundPositionX = bigX
                big.style.backgroundPositionY = bigY
            },
            box() { return this.$refs.box },
            mask() { return this.$refs.mask },
            big() { return this.$refs.big }
        },

    })
</script>

</html>